<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/jQuery-3.5.1.js"></script>
    <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="/static/js/csrf.js"></script>

    <style>

    </style>

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!--ajax提交数据有用到-->
            <form id="myform">
                <h1 class="text-center">请注册用户</h1>
                    {% csrf_token %}
                    {% for form in form_obj %}
                         <div class="form-group">
                            <!-- form.auto_id拿到input框的id:form组件渲染的 id='id_字段名'  -->
                            <label for="{{ form.auto_id }}">{{ form.label }}</label>
                            {{ form }}
                            <span style="color: red" class="pull-right"></span><!--通过ajax获取的报错信息给它text()添加内容-->

                        </div>

                    {% endfor %}

                    <!--动态显示用户选择图片-->
                    <div class="form-group">
                        <label for="myfile" style="margin-left: 10px">上传头像
                            {% load static %}
                             <img src="{% static 'img/default.jpg' %}" alt="图片加载" height="100" id="myimg">
                             {#点击图片也可以打开文件，进行上传 因为label for 的id是文件上传的#}
                        </label>
                        <input type="file" id="myfile" name="avatar" style="display: none">
                        <!--display:none  隐藏掉-->
                    </div>

                    <input type="button" id="id_commit" class="btn btn-primary pull-right" value="注册">



            </form>

        </div>
    </div>
</div>


<script>
    //文本域变化事件
    $('#myfile').change(function () {
        //文件阅读器对象
        //1 先生成一个文件阅读器对象
        let myFileReaderObje = new FileReader();
        //2 获取用户上传的头像文件,怎么拿上传的文件，通过下面，可以$(this)
        let fileObj=$('#myfile')[0].files[0]
        //3 将文件对象交给阅读器对象读取
        myFileReaderObje.readAsDataURL(fileObj)//异步操作，不等待文件阅读完毕，文件还没有读完，就走到下一步了。
        //4 利用文件阅读器将文件展示到前端页面，修改src属性
        //等待文件阅读器加载完毕再执行，unload,再显示图片
        myFileReaderObje.onload=function(){
             $('#myimg').attr('src',myFileReaderObje.result)
        }

    })

    //通过ajax来发送post请求,我们发送的数据即包含普通键值对也包含文件
    $('#id_commit').click(function () {
        let formDataObj = new FormData();
        //1添加普通键值对,通过form表单的id, 可以拿到form标签里面的所有普通的键值对,
        {#console.log($('#myform').serializeArray())//[{},{},{}]#}
        $.each($('#myform').serializeArray(),function (index,obj) {
                {#console.log(index,obj)//obj={}#}
            //将所有普通键值对添加进去
            formDataObj.append(obj.name,obj.value)
        })
        //2 添加文件数据
        file = $('#myfile')[0].files[0]
        formDataObj.append('avatar',file)

        $.ajax({
            url:'',
            type:'post',
            data:formDataObj,
            //需要指定关键性的参数
            contentType:false,
            processData:false,
             success:function (args)
             {
                    if(args.core===1000)
                    { //如果code=1000代表用户注册成功,跳转到指定的url
                        //跳转到登录界面,
                        {#window.location.href=args.url#}
                        alert('注册成功！')
                   parent.location.href=args.url //parent=http:127.0.0.1:8000,再拼接上url
                    }
                    else if(args.core===2000)
                    {

                        //如何将对应得错误提示展示到对应的input框
                        $.each(args.msg, function (index, obj) {
                            console.log(index,obj)//index=字段,obj=['报错信息']
                            //forms组件生成的input的框的id值=id_forms内的字段名
                            let targetId = '#id_' + index
                            //拿到对应的input表,next是input标签下的span标签,修改其内容,再拿到span的父亲标签,添加红边框

                            $(targetId).next().text(obj[0]).parent().addClass('has-error')
                            //用户点击框,就取消红色和提示信息
                            //给所有input框绑定获取焦点事件
                            //拿到属性标签
                            $('input').focus(function () {
                                //将input下面的span标签和input外面的div标签修改内容及属性
                                $(this).next().text('') //将input标签的下一个标签span设置成空，next同级别下一个，prev同级上一个
                                $(this).parent().removeClass('has-error')
                            })

                        })


                    }






                } //success结束
        })
    })

</script>

</body>
</html>